<template>
  <div class="information">
    <h2>商户基本信息</h2>
    <div v-if="merModel" class="business-msg">
      <div class="lab-title">基本信息</div>
      <div class="user-msg">
        <div class="basic-information">
          <div>商户名称：{{ merData.mer_name }}</div>
          <div>商户负责人手机号：{{ merData.mer_phone }}</div>
        </div>
        <div v-if="merData.merchantCategory.category_name" class="basic-information">
          <div>商户分类：{{ merData.merchantCategory.category_name || '' }}</div>
          <div>商户类别：{{ merData.is_trader ? '自营' : '非自营' }}</div>
        </div>
        <div class="basic-information">
          <div>商户负责人姓名：{{ merData.real_name }}</div>
          <div>商户入驻时间：{{ merData.create_time }}</div>
        </div>
        <div v-if="merData.sub_mchid" class="basic-information">
          <div>微信服务商ID: {{ merData.sub_mchid }}</div>
          <div v-if="merData.merchantType">店铺类型：{{ merData.merchantType.type_name }}</div>
        </div>
        <div class="basic-information">
          <div>
            是否开启商户：
            <el-switch v-model="merData.mer_state" active-text="开启" inactive-text="关闭" :active-value="1"
                       :inactive-value="0"
            />
            <span class="trip">开启，店铺即可展示在移动端</span>
          </div>
        </div>
      </div>
      <div class="business-msg">
        <div class="lab-title">店铺信息</div>
        <div class="form-data">
          <el-form ref="ruleForm" :model="merData" :rules="rules" label-width="170px" class="demo-ruleForm">
                        <el-form-item class="form-item" :label="'店铺banner：(710*200px)'" prop="mer_banner">
                          <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1')">
                            <div v-if="merData.mer_banner" class="pictrue">
                              <img :src="merData.mer_banner">
                            </div>
                            <div v-else class="upLoad">
                              <i class="el-icon-camera cameraIconfont"/>
                            </div>
                          </div>
                        </el-form-item>
            <el-form-item class="form-item" :label="'店铺Logo：'" label-width="120px" prop="mer_avatar">
              <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('2')">
                <div v-if="merData.mer_avatar" class="pictrue">
                  <img :src="merData.mer_avatar">
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form-item" :label="'门头照：'" label-width="170px">
              <div class="tip-form">
                <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('3')">
                  <div v-if="merData.mini_banner" class="pictrue">
                    <img :src="merData.mini_banner">
                  </div>
                  <div v-else class="upLoad">
                    <i class="el-icon-camera cameraIconfont"/>
                  </div>
                </div>
                <span class="trip">此图显示在店铺街位置，如果未上传<br/>默认展示店铺Banner图</span>
              </div>
            </el-form-item>

            <el-form-item class="form-item" label="营业执照：" label-width="120px"
                          :prop="merData.sys_bases_status == 1 ? 'uploadedqualifications' : ''"
            >
              <div class="upLoadPicBox_qualification">
                <div v-for="(item, index) in uploadedQualifications" :key="index" class="uploadpicBox_list">
                  <div class="uploadpicBox_list_image">
                    <el-image ref="elImage" :src="item.url" :preview-src-list="[item.url]"/>
                  </div>
                  <div class="uploadpicBox_list_method">
                    <i class="el-icon-delete" @click="deldetQualificationsList(index)"/>
                    <i class="el-icon-view" @click="viewImage(item, index)"/>
                  </div>
                </div>
                <el-upload :action="fileUrl" :show-file-list="false" list-type="picture-card" multiple
                           :headers="myHeaders" :on-success="setQualificationsList"
                           :before-upload="beforeUploadQualification"
                >
                  <i class="el-icon-plus"/>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="配送方式:" prop="delivery_way">
              <el-checkbox-group v-model="merData.delivery_way">
                <el-checkbox v-for="item in deliveryList" :key="item.value" :label="item.value" disabled>
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
              <!--              <span class="trip">只选择一种配送方式时,会自动修改店铺所有商品的配送方式</span>-->
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="设置服务费：" prop="share_ratio">
                  <div style="display: flex;flex-direction: row">
                    <el-input v-model="merData.share_ratio" type="number"/>
                    %
                  </div>

                </el-form-item>
              </el-col>
            </el-row>
            <!--            <el-row>-->
            <!--              <el-col :span="16">-->
            <!--                <el-form-item label="邑云付appid：" prop="jee_app_id">-->
            <!--                  <div style="display: flex;flex-direction: row">-->
            <!--                    <el-input v-model="merData.jeepay_config.jee_app_id" type="text"/>-->
            <!--                  </div>-->

            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <!--            <el-row>-->
            <!--              <el-col :span="12">-->
            <!--                <el-form-item label="邑云付秘钥：" prop="jee_app_secret">-->
            <!--                  <div>-->
            <!--                    <el-input v-model="merData.jeepay_config.jee_app_secret" type="text"/>-->

            <!--                  </div>-->

            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <!--            <el-row>-->
            <!--              <el-col :span="12">-->
            <!--                <el-form-item label="商户id：" prop="jee_mch_id">-->
            <!--                  <div>-->
            <!--                    <el-input v-model="merData.jeepay_config.jee_mch_id" type="text"/>-->

            <!--                  </div>-->

            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <el-row
              v-if="(merData.delivery_way.length == 1 && merData.delivery_way[0] == '1') || (merData.delivery_way.length == 2)"
              :gutter="24"
            >
              <el-col :span="12">
                <el-form-item label="提货点名称：" prop="mer_take_name">
                  <el-input v-model="merData.mer_take_name" maxlength="30" placeholder="请输入提货点名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提货点电话：" prop="mer_take_phone">
                  <el-input
                    v-model="merData.mer_take_phone"
                    placeholder="请输入提货点电话"
                  />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row
              v-if="(merData.delivery_way.length == 1 && merData.delivery_way[0] == '1') || (merData.delivery_way.length == 2)"
            >
              <el-col :span="12">
                <el-form-item label="详细地址：" prop="mer_take_address">
                  <el-input v-model="merData.mer_take_address" placeholder="请输入详细地址"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经纬度：" prop="mer_take_location">
                  <el-input
                    v-model="merData.mer_take_location"
                    enter-button="查找位置"
                    style="width: 100%;"
                    placeholder="请查找位置"
                    readonly
                  >
                    <el-button
                      slot="append"
                      style="background: #46a6ff; color: #fff; border-radius: 0 4px 4px 0;"
                      @click="onSearchs"
                    >查找位置
                    </el-button>
                  </el-input>
                  <div slot="content">请点击查找位置选择位置</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              v-if="(merData.delivery_way.length == 1 && merData.delivery_way[0] == '1') || (merData.delivery_way.length == 2)"
            >
              <el-col :span="12">
                <el-form-item label="提货点营业日期：" prop="mer_take_day">
                  <el-select
                    v-model="merData.mer_take_day"
                    filterable
                    multiple
                    placeholder="请选择营业时间"
                    class="selWidth"
                  >
                    <el-option
                      v-for="item in date"
                      :key="item.date_id"
                      :label="item.date_name"
                      :value="item.date_id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提货点营业时间：" prop="mer_take_time">
                  <el-time-picker
                    v-model="merData.mer_take_time"
                    is-range
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                    value-format="HH:mm"
                    @change="onchangeTime"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商户简介：" prop="mer_info" label-width="170px">
                  <el-input v-model="merData.mer_info" type="textarea" placeholder="文字简介，200字以内"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商户关键字：" prop="mer_keyword" label-width="170px">
                  <div class="tip-form">
                    <el-input v-model="merData.mer_keyword" style="min-width: 200px;"
                              placeholder="用户在搜索该关键字时，可搜索到本店铺"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="客服电话：" prop="service_phone" label-width="170px">
                  <el-input v-model="merData.service_phone"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-col>
                  <el-form-item label="商户地址：" prop="area_ids">
                    <el-input v-if="merData.area_names!=''&& !show" v-model="merData.area_names" style="width: 100%"
                              disabled
                    >
                      <el-button slot="append" type="success" @click="rest">重新设置位置</el-button>
                    </el-input>

                    <el-cascader v-model="merData.area_ids" v-if="merData.area_names==''|| show" :props="cascaderProps"
                                 class="selWidth" clearable
                    />


                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-form-item label="定位地址：" prop="mer_address" label-width="170px">
                  <el-input v-model="merData.mer_address" enter-button="查找位置" style="width: 100%"
                            placeholder="请输入定位地址（地址中请包含城市名称，否则会影响搜索精度）"
                  >
                    <el-button slot="append" type="primary" @click="onSearch">查找位置</el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <Maps v-if="mapKey" ref="mapChild" class="map-sty" :map-key="mapKey" :lat="Number(merData.lat || 34.34127)"
                  :lon="Number(merData.long || 108.93984)" :address="merData.mer_address"
                  @getCoordinates="getCoordinates"
            />
            <el-form-item/>
          </el-form>
        </div>
      </div>
      <div class="lab-title">功能信息</div>
      <div class="user-msg">
        <div class="basic-information">
          <div>
            商户手续费：{{
              Number(merData.commission_rate) > 0 ? parseFloat(merData.commission_rate) : parseFloat(merData.merchantCategory.commission_rate * 100)
            }}%
          </div>
          <div>添加商品：{{ merData.is_audit ? '需平台审核' : '平台免审核' }}</div>
        </div>
        <div class="basic-information">
          <div>开启直播间：{{ merData.is_bro_room ? '需平台审核' : '平台免审核' }}</div>
          <div>添加直播商品：{{ merData.is_bro_goods ? '需平台审核' : '平台免审核' }}</div>
        </div>
        <div class="basic-information">
          <div>平台首页推荐商户：{{ merData.is_best ? '是' : '否' }}</div>
        </div>
      </div>
      <div class="submit-button">
        <el-button type="primary" :loading="submitLoading" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </div>
    <el-dialog
      v-if="modalMap"
      v-model="modalMap"
      :visible.sync="modalMap"
      title="选择位置"
      close-on-click-modal
      class="mapBox"
      custom-class="dialog-scustom"
    >
      <iframe id="mapPage" width="100%" height="500px" frameborder="0" :src="keyUrl"/>
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { storeGetInfoApi } from '@/api/setting'
import { getAddressListApi, getBaseInfo, merchantUpdate } from '@/api/user.js'
import Maps from '@/components/map/map.vue'
import { getToken } from '@/utils/auth'
import SettingMer from '@/libs/settingMer'
import { cateListApi } from '@/api/product'

export default {
  name: 'Information',
  components: { Maps },
  data() {
    var checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入客服电话'))
      } else {
        let regPone = null
        const mobile = /^1(3|4|5|6|7|8|9)\d{9}$/ // 最新16手机正则
        const tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/ // 座机
        if (value.charAt(0) == 0) {
          // charAt查找第一个字符方法，用来判断输入的是座机还是手机号
          regPone = tel
        } else {
          regPone = mobile
        }
        if (!regPone.test(value)) {
          return callback(new Error('请填写客服电话(座机格式\'区号-座机号码\')'))
        }
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写手机号'))
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'))
      } else {
        callback()
      }
    }
    return {
      show: false,
      merModel: false,
      modalMap: false,
      is_trader: -1,
      merData: {
        area_ids: [],
        delivery_way: [
          '1', '2'
        ],
        area_names: '',
        mer_take_name: '',
        mer_take_phone: '',
        mer_take_address: '',
        mer_take_time: ['', ''],
        mer_take_day: [],
        mer_take_location: '',
        id: 0,
        share_ratio: 20,
        mer_take_status: 0,
        long: '',
        lat: '',
        jeepay_config: {
          jee_app_id: '',
          jee_app_secret: '',
          jee_mch_id: ''
        }
      }, // 默认数据
      // 省市区县多级分类
      cascaderProps: {
        emitPath: true,
        lazy: true, // 开启懒加载
        checkStrictly: true, //可选择任意节点
        lazyLoad: this.getAddressList
      },
      myHeaders: { 'X-Token': getToken() },
      uploadedQualifications: [], // 资质图片列表
      mapKey: '', // 地图key
      address: '',
      key: '',
      date: [
        { date_name: '周一', date_id: 1 },
        { date_name: '周二', date_id: 2 },
        { date_name: '周三', date_id: 3 },
        { date_name: '周四', date_id: 4 },
        { date_name: '周五', date_id: 5 },
        { date_name: '周六', date_id: 6 },
        { date_name: '周日', date_id: 7 }
      ],
      submitLoading: false, // 提交loading
      deliveryList: [
        { value: '1', name: '到店自提' },
        { value: '2', name: '快递配送' }
      ],
      rules: {
        mer_banner: [{ required: true, message: '请上传店铺banner' }],
        mer_avatar: [{ required: true, message: '请上传店铺logo' }],
        mer_info: [{ required: true, message: '请输入商户简介', trigger: 'blur' },
          { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
        ],
        mer_keyword: [{ required: false, message: '请输入商户关键字', trigger: 'blur' }],
        service_phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
        mer_address: [{ required: true, message: '请输入商户地址', trigger: 'blur' }],
        uploadedqualifications: [{ required: true, message: '请上传商户资质', trigger: 'blur' }],
        delivery_way: [{ required: true, message: '请选择送货方式', trigger: 'change' }],
        mer_take_name: [{ required: true, message: '请输入提货点名称', trigger: 'blur' }],
        mer_take_day: [{ required: true, type: 'array', message: '请选择提货点营业日期', trigger: 'change' }],
        mer_take_time: [{ required: true, message: '请选择提货点营业时间', trigger: 'change' }],
        mer_take_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        mer_take_address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        share_ratio: [{ required: true, message: '请输入服务费', trigger: 'change' }],
        mer_take_location: [{ required: true, message: '请选择经纬度', trigger: 'blur' }],
        area_ids: [{ required: true, message: '请选择商家地址', trigger: 'blur' }]
      },
      keyUrl: ''
    }
  },
  computed: {
    fileUrl() {
      return SettingMer.https + `/upload/certificate`
    }
  },
  watch: {
    uploadedQualifications(val) {
      // 由于 uploadedqualifications 字段未被添加到 merData 对象中，因此，使用 1 或 '' 作为符号表示 merData 中的 uploadedqualifications 图片列表是否添加完毕
      if (val.length) {
        this.merData.uploadedqualifications = 1
      } else {
        this.merData.uploadedqualifications = ''
      }
    }
  },
  created() {
    this.getMapInfo()
    this.getInfo()
    // this.getAddressList(0)
  },
  mounted: function() {
    window.addEventListener(
      'message',
      function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data
        if (loc && loc.module === 'locationPicker') {
          // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          window.parent.selectAdderss(loc)
        }
      },
      false
    )
    window.selectAdderss = this.selectAdderss
  },
  methods: {
    rest() {
      this.show = true
    },
    // 营业时间
    onchangeTime(e) {
      this.merData.mer_take_time = e
    },
    // 选择经纬度
    selectAdderss(data) {
      this.merData.mer_take_location = data.latlng.lat + ',' + data.latlng.lng
      this.merData.lat = data.latlng.lat || 34.34127
      this.merData.long = data.latlng.lng || 108.93984
      this.modalMap = false
    },
    onSearchs() {
      if (!this.key || this.key == '') {
        this.$message.error('平台未配置腾讯地图KEY')
      } else {
        this.modalMap = true
      }
    },
    // 地图信息获取
    getCoordinates(data) {
      // this.merData.mer_address = data.address;
      this.merData.lat = data.location.lat || 34.34127
      this.merData.long = data.location.lng || 108.93984
      console.log(data)
    },
    // 获取历史信息
    getInfo() {
      const that = this
      that.merModel = false
      getBaseInfo().then((res) => {
        that.merData = res.data
        that.$set(that.merData, 'uploadedqualifications', '') // 资质图片列表
        // that.$set(that.merData, 'delivery_way', res.data.delivery_way && res.data.delivery_way.length ? res.data.delivery_way.map(String) : [])
        that.$set(that.merData, 'delivery_way', [
          '1', '2'])
        that.key = res.data.tx_map_key
        const keys = res.data.tx_map_key
        that.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
        const info = res.data || null
        that.merData.mer_take_time = info.mer_take_time || ['', '']
        that.merData.mer_take_day = info.mer_take_day || []
        that.merData.mer_take_phone = info.mer_take_phone
        that.merData.mer_take_name = info.mer_take_name
        that.merData.mer_take_address = info.mer_take_address
        that.merData.mer_take_location =
          info.mer_take_location && info.mer_take_location.length
            ? info.mer_take_location[0] + ',' + info.mer_take_location[1]
            : ''
        that.merData.mer_take_status = info.mer_take_status || 0
        that.merData.area_ids = info.area_ids || []
        that.merData.area_names = info.area_names
        that.merData.jeepay_config = info.jeepay_config
        that.is_trader = info.is_trader
        this.merModel = true
        if (res.data.mer_certificate instanceof Array) {
          res.data.mer_certificate.forEach((item) => {
            that.uploadedQualifications.push({ url: item })
          })
        } else {
          that.uploadedQualifications = []
        }
      })
    },
    //商户地址 - 省市区
    // getAddressList(id){
    //   getAddressListApi(id)
    //     .then((res) => {
    //       console.log(res)
    //
    //     })
    //     .catch((rej) => {
    //
    //       this.$message.error(rej.data.message)
    //     })
    // },
    getAddressList(node, resolve) {
      const nodes = []
      console.log(node)
      // if(node.root){
      //   setTimeout(() => {
      //     // 构造查询条件
      //     let query = 0
      //     //查询接口
      //     getAddressListApi(query).then(res => {
      //       let list = res.data
      //       this.merAddressList = list
      //       this.merAddressList.map((item) => {
      //         let obj = {
      //           value: item.id,
      //           label: item.name,
      //           leaf: item.isLeaf
      //         }
      //         nodes.push(obj);
      //       })
      //       //重新加载节点
      //       resolve(nodes);
      //     })
      //   }, 100);
      // }
      if (node.root || node.hasChildren) {
        setTimeout(() => {
          // 构造查询条件
          let query = node.value
          if (node.value) {
            query = node.value
          } else {
            query = 0
          }
          //查询接口
          getAddressListApi(query).then(res => {
            let list = res.data
            this.merAddressList = list
            this.merAddressList.map((item) => {
              let obj = {
                value: item.id,
                label: item.name,
                leaf: item.isLeaf
              }
              nodes.push(obj)
            })
            //重新加载节点
            resolve(nodes)
          })
        }, 100)

      } else {
        console.log(121123234234242)
        //如果没有子节点就不发起请求，直接渲染，也避免了点击叶子节点仍然有加载动画的问题
        resolve(nodes)
      }

    },
    // 提交/修改
    submitForm(formName) {
      var number = parseInt(this.merData.share_ratio)
      if (number < 1) {
        this.$message.error('请输入1-30之间的服务费')
        return
      }
      if (number > 30) {
        this.$message.error('请输入1-30之间的服务费')
        return
      }
      // if(this.merData.sub_appid==''&&this.merData.sub_mchid!=''){
      //   this.$message.error('微信特约商户appId不能为空')
      //   return
      // }
      // if(this.merData.sub_appid!=''&&this.merData.sub_mchid==''){
      //   this.$message.error('微信特约商户号不能为空')
      //   return
      // }
      // if(this.merData.area_ids.length<3){
      //   this.$message.error('请选择商户地址');
      //   return;
      // }if(this.merData.area_ids.length<3){
      //   this.$message.error('请选择商户地址');
      //   return;
      // }
      console.log(this.merData)
      this.$refs[formName].validate(valid => {
        if (valid) {

          const dataKey = Object.keys(this.rules)
          const reqData = {};
          [...dataKey, 'mer_state', 'long', 'lat', 'mini_banner', 'jeepay_config'].map(item => {
            reqData[item] = this.merData[item]
          })
          reqData.mer_certificate = this.uploadedQualifications.map(item => item.response ? item.response.data.src : item.url)
          const location = this.merData.mer_take_location
            ? [
              this.merData.mer_take_location.split(',')[0],
              this.merData.mer_take_location.split(',')[1]
            ] : []
          reqData.mer_take_location = location
          this.submitLoading = true
          // console.log(reqData)
          merchantUpdate(reqData)
            .then((res) => {
              console.log(res)
              this.submitLoading = false
              this.$message.success('提交成功')
            })
            .catch((rej) => {
              this.submitLoading = false
              this.$message.error(rej.data.message)
            })
        } else {
          this.$message.error('请完善信息后再进行提交')
          this.submitLoading = false
          return false
        }
      })
    },
    // 查找位置
    onSearch() {
      console.log(this.$refs)
      this.$refs.mapChild.searchKeyword(this.merData.mer_address)
    },
    // 获取 map key
    getMapInfo() {
      const that = this
      storeGetInfoApi()
        .then((res) => {
          console.log(res)
          this.mapKey = res.data.tx_map_key
        })
        .catch(function(res) {
          that.$message.error(res.message)
        })
    },
    // 上传图片
    modalPicTap(tit, num, i) {
      const _this = this
      this.$modalUpload((img) => {
        if (tit === '1' && !num) {
          _this.merData.mer_banner = img[0]
        }
        if (tit === '2' && !num) {
          _this.merData.mer_avatar = img[0]
        }
        if (tit === '3' && !num) {
          _this.merData.mini_banner = img[0]
        }
      }, tit)
    },

    // 资质图片删除
    deldetQualificationsList(index) {
      this.uploadedQualifications.splice(index, 1)
    },
    // 上传文件之前的钩子函数
    beforeUploadQualification() {
      if (this.uploadedQualifications.length >= 5) {
        this.$message.error('上传文件最大数量为5张, 上传失败!')
        return false
      } else {
        return true
      }
    },
    // 上传成功
    setQualificationsList(response) {
      if (response.status === 200) {
        this.uploadedQualifications.push({ url: response.data.src })
        // this.$message.success("上传成功");
      } else {
        this.$message.error(response.message)
      }
    },
    // 查看资质图片
    viewImage(item, index) {
      this.$refs.elImage[index].clickHandler()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-textarea__inner {
  height: 90px;
}

.information {
  width: 100%;
  padding: 30px 40px 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // .business-msg {
  //   width: 80%;
  // }
  h2 {
    text-align: center;
    color: #303133;
    font-weight: bold;
    font-size: 20px;
  }

  .lab-title {
    width: max-content;
    font-size: 14px;
    font-weight: bold;
    color: #303133;
    margin: 10px 10%;

    &::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 13px;
      background-color: #1890FF;
      margin-right: 6px;
      position: relative;
      top: 1px;
    }
  }

  .user-msg {
    padding: 0 20px;
    margin-top: 30px;
  }

  .basic-information {
    display: flex;
    justify-content: space-between;
    padding: 10px 10%;
    font-size: 13px;
    font-weight: bold;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    color: #666666;

    > div {
      width: 350px;
      flex-wrap: nowrap;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
  }

  .trip {
    padding-left: 10px;
    color: #FFB027;
    font-weight: normal;
  }

  .selWidth {
    width: 100%;
  }

  .demo-ruleForm {
    overflow: hidden;

    .form-item {
      width: 48%;
      display: inline-block;
    }
  }

  .form-data {
    padding: 30px 8%;

    .map-sty {
      width: 90%;
      text-align: right;
      margin: 0 0 0 10%;
    }

    .pictrue img {
      border-radius: 4px;
      object-fit: cover;
    }

    .tip-form {
      display: flex;
      align-items: center;

      span {
        white-space: nowrap;
        padding-left: 10px;
        line-height: 20px;
      }
    }
  }

  .submit-button {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    // left: 50%;
    width: 80%;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.7);
  }
}

/deep/ .el-upload--picture-card {
  width: 58px;
  height: 58px;
  line-height: 70px;
}

/deep/ .el-upload-list__item {
  width: 58px;
  height: 58px;
}

.upLoadPicBox_qualification {
  display: flex;
  flex-wrap: wrap;

  .uploadpicBox_list {
    position: relative;
    height: 58px;
    width: 58px;
    margin: 0 20px 20px 0;

    .uploadpicBox_list_image {
      position: absolute;
      top: 0;
      left: 0;
      width: 58px;
      height: 58px;
      border-radius: 4px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .uploadpicBox_list_method {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 4px;
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: 0.3s;
    }
  }
}

.uploadpicBox_list:hover .uploadpicBox_list_method {
  z-index: 11;
  opacity: 1;
}
</style>
